<template>
	<view class="container b-f">
		<!-- 顶部选项卡 -->
		<view class="swiper-tab dis-flex box-align-center flex-y-center">
			<block v-for=" (item,index) in tabList " :key="index">
				<view class="swiper-tab-item" :class="[ dataType == item.value ? 'on' : '']" :data-current=" item.value " @tap="swichNav">{{ item.text }}</view>
			</block>
		</view>
		<!-- 提现明细列表 -->
		<scroll-view scroll-y=" true " @scrolltolower="triggerDownLoad" :style="[{height: Height}]">
			<view class="widget-list" v-if="list.data && list.data.length ">
				<view class="widget__detail dis-flex flex-x-between" v-for=" (item,index) in  list.data " :key="index">
					<view class="detail__left dis-flex flex-dir-column flex-x-around">
						<view class="detail__money f-30">提现 {{ item.money }}元</view>
						<view class="detail__time col-9 f-24">{{ item.create_time }}</view>
					</view>
					<view class="detail__right dis-flex flex-dir-column flex-x-center flex-y-center">
						<view class="detail__status f-28 " :class="[item.apply_status == 20||item.apply_status == 40?'col-green':'col-m']">{{ applyStatus[item.apply_status] }}</view>
						<block v-if=" item.apply_status == 30 ">
							<view class="detail__reason f-24" @tap="triggerReasonMsg" :data-reason=" item.reject_reason ">查看原因</view>
						</block>
					</view>
				</view>
				<!-- 没有更多 -->
				<view v-if="list.data && list.data.length && !isLoading && no_more " class="no-more f-30">亲, 没有更多了</view>
			</view>
			<!-- 没有记录 -->
			<view class="yoshop-notcont" v-if="list.data && !list.data.length && !isLoading ">
				<text class="iconfont icon-wushuju"></text>
				<text class="cont">亲，暂无提现记录哦</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		computed: {
			Height() {
				return uni.upx2px(this.swiperHeight * 2 ) + 'px';
			}
		},
		data() {
			return {
				applyStatus: [],
				list:{},
				tabList:{},
				words:{},
				isLoading: true,
				dataType: -1,
				page: 1,
				no_more: false,
				swiperHeight:'',
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			// 设置swiper的高度
			this.setSwiperHeight();
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			// 获取提现明细列表
			this.getWithdrawList();
		},
		methods: {
			/**
			 * 获取提现明细列表
			 */
			getWithdrawList: function(isNextPage, page) {
				let _this = this;
				_this._get('user.dealer.withdraw/lists', {
					status: _this.dataType,
					page: page || 1,
				}, function(result) {
					// 创建页面数据
					_this.setData(_this.createData(result.data, isNextPage));
					// return false;
				});
			},

			/**
			 * 创建页面数据
			 */
			createData: function(data, isNextPage) {
				data['isLoading'] = false;
				// 列表数据
				let dataList = this.list;
				if (isNextPage == true && (typeof dataList !== 'undefined')) {
					data.list.data = dataList.data.concat(data.list.data)
				}
				// 设置当前页面标题
				uni.setNavigationBarTitle({
					title: data.words.withdraw_list.title.value
				})
				// 导航栏数据
				data['tabList'] = [{
						value: -1,
						text: data.words.withdraw_list.words.all.value,
					}, {
						value: 10,
						text: data.words.withdraw_list.words.apply_10.value,
					}, {
						value: 20,
						text: data.words.withdraw_list.words.apply_20.value,
					},
					{
						value: 40,
						text: data.words.withdraw_list.words.apply_40.value,
					},
					{
						value: 30,
						text: data.words.withdraw_list.words.apply_30.value,
					}
				];
				// 审核状态
				data['applyStatus'] = {};
				data['tabList'].forEach(function(item) {
					data['applyStatus'][item.value] = item.text;
				});
				return data;
			},

			/**
			 * 设置swiper的高度
			 */
			setSwiperHeight: function() {
				// 获取系统信息(拿到屏幕宽度)
				let systemInfo = uni.getSystemInfoSync(),
					upx = systemInfo.windowWidth / 750, // 计算upx
					tapHeight = Math.floor(upx * 82), // tap高度
					swiperHeight = systemInfo.windowHeight - tapHeight; // swiper高度
				this.setData({
					swiperHeight
				});
			},

			/** 
			 * 点击tab切换 
			 */
			swichNav: function(e) {
				let _this = this,
					current = e.target.dataset.current;
				if (_this.dataType == current) {
					return false;
				}
				_this.setData({
					dataType: current,
					list: {},
					page: 1,
					no_more: false,
					isLoading: true,
				});
				// 获取提现明细列表
				_this.getWithdrawList();
			},

			/**
			 * 下拉到底加载数据
			 */
			triggerDownLoad: function() {
				// 已经是最后一页
				if (this.page >= this.list.last_page) {
					this.setData({
						no_more: true
					});
					return false;
				}
				// 获取提现明细列表
				this.getWithdrawList(true, ++this.page);
			},

			/**
			 * 查看驳回原因
			 */
			triggerReasonMsg: function(e) {
				uni.showModal({
					// title: this.applyStatus['30'] + '原因',
					title: '友情提示',
					content: e.currentTarget.dataset.reason,
					showCancel: false
				});
			},
		}
	}
</script>

<style>
page {
  background: #fff;
}

/* 选项卡 */

.swiper-tab {
  width: 100%;
  text-align: center;
  height: 80upx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.swiper-tab .swiper-tab-item {
  width: 33.333333%;
  height: 100%;
  font-size: 28upx;
  color: #777;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 2px solid #ffffff00;
}

.swiper-tab .on {
  color: #786cff;
  border-bottom: 2px solid #786cff;
}

/* 设置scroll-view容器高度 */

.widget-list, .yoshop-notcont {
  height: 100.1%;
}

/* 提现明细列表 */

.widget-list {
  padding: 10upx 20upx 40upx 20upx;
  box-sizing: border-box;
}

.widget__detail {
  padding: 20upx 15upx;
  box-sizing: border-box;
  font-size: 28upx;
  border-bottom: 1upx solid #e7e7e7;
}

.widget__detail .detail__money {
  font-size: 30upx;
  margin-bottom: 12upx;
}

.widget__detail .detail__reason {
  margin-top: 15upx;
  color: #8e84fc;
}

</style>
